<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <meta name="keywords" content="" />
        <meta name="description" content="" />
        <link rel="stylesheet" href="__ADMIN__/wx/css/default.css">
        <script type="text/javascript" src="__ADMIN__/wx/js/jquery-1.6.4.min.js"></script>
        <script type="text/javascript" src="__ADMIN__/wx/js/jquery.form.js"></script>
		<link rel="stylesheet" href="__ADMIN__/js/plugins/code/prettify.css" />
		<script charset="utf-8" src="__ADMIN__/js/plugins/kindeditor/kindeditor-all-min.js"></script>
		<script charset="utf-8" src="__ADMIN__/lang/zh_CN.js"></script>
		<script charset="utf-8" src="__ADMIN__/js/plugins/code/prettify.js"></script>
		<style type="text/css">
			.demo{width:620px; margin:30px auto}
			.demo p{line-height:32px}
			.btnfile{position: relative;overflow: hidden;margin-right: 4px;display:inline-block;*display:inline;padding:4px 10px 4px;font-size:14px;line-height:18px;*line-height:20px;color:#fff;text-align:center;vertical-align:middle;cursor:pointer;background-color:#5bb75b;border:1px solid #cccccc;border-color:#e6e6e6 #e6e6e6 #bfbfbf;border-bottom-color:#b3b3b3;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
			.btnfile input {position: absolute;top: 0; right: 0;margin: 0;border: solid transparent;opacity: 0;filter:alpha(opacity=0); cursor: pointer;}
			.progress { position:relative; margin-left:100px; margin-top:-24px; width:200px;padding: 1px; border-radius:3px; display:none}
			.bar {background-color: green; display:block; width:0%; height:20px; border-radius: 3px; }
			.percent { position:absolute; height:20px; display:inline-block; top:3px; left:2%; color:#fff }
			.files{height:22px; line-height:22px; margin:10px 0}
			.delimg{margin-left:20px; color:#090; cursor:pointer}
			.place{height:40px; background:url(__ADMIN__/images/righttop.gif) repeat-x;}
			.place span{line-height:40px; font-weight:bold;float:left; margin-left:12px;}
			.placeul li{float:left; line-height:40px; padding-left:7px; padding-right:12px; background:url(__ADMIN__/images/rlist.gif) no-repeat right;}
			.placeul li:last-child{background:none;}
			.div_img{position:relative;}
			.deleteBtn{position: absolute; top:0;right:0;}
			
			.zhekou{height:26px;width:59px;background:url(__ADMIN__/images/beautymf.png) no-repeat;background-size:auto 26px;}
			.zhekou_a{background:url(__ADMIN__/images/beautymf.png) no-repeat;background-size:auto 26px;}
			.zhekou_b{background:url(__ADMIN__/images/beautytj.png) no-repeat;background-size:auto 26px;}
			.zhekou p{font-size:12px;color:#fff;line-height:26px;text-align:center;text-indent:0;}
						
		</style>
    </head>
    <body>
    	<div class="place">
		    <span>位置：</span>
		    <ul class="placeul">
		    	<li>首页</li>
		    	<li>编辑服务项目</li>
		    </ul>
		</div>
        <div class="col_main">
        	<form action="{:U('edit')}" method="post" enctype="multipart/form-data">
            <div class="main_bd">
                <div class="media_edit_area">
                    <div id="js_appmsg_editor">
                        <div class="appmsg_editor" style="margin-top: 0px;">
                        	<input type="hidden" name="id" value="{$item.id}">
                        	<input type="hidden" name="number" id="number" value="{$number}">
                            <div class="inner">
                                <div class="appmsg_edit_item">
                                    <label for="" class="frm_label">项目名称</label>
                                    <span class="frm_input_box"><input type="text" class="frm_input js_title" name="service_name" value="{$item.service_name}"/></span>
                                </div>
                                <div class="appmsg_edit_item">
                                    <label for="" class="frm_label">
                                        <strong class="title">封面图</strong>
                                        <p class="js_cover_tip tips">（大图片建议尺寸：600像素 * 260像素）</p>
                                    </label>
                                    <div class="upload_wrap">
                                       	<div class="upload_box">
                                        	<input type="hidden" name="service_cover" id="cover" value="{$item.service_cover}"/>
                                            <div class="upload_area">
	                                            <div class="btnfile">
										            <span><if condition="$item.service_cover">替换<else />上传</if></span>
										            <input id="fileupload" type="file" name="cover_file" multiple>
										        </div>
										        <div class="progress">
										    		<span class="bar"></span><span class="percent">0%</span >
												</div>
										        <div class="files"></div>
										        <div class="showimg"><if condition="$item.service_cover"><img src="__UPLOADS__/Service/Cover/{$item.service_cover}" style="width:600px; height:260px;"></if></div>
	                                        </div>
	                                    </div>
	                                </div>
	                            </div>
	                            
	                            <div class="appmsg_edit_item">
                                    <label for="" class="frm_label">
                                        <strong class="title">缩略展示图</strong>
                                        <p class="js_cover_tip tips">（大图片建议尺寸：160像素 * 120像素）</p>
                                    </label>
                                    <div class="upload_wrap" >
                                       	<div class="upload_box">
                                        	<input type="hidden" name="order_banner" id="orderBanner" value="{$item.order_banner}"/>
                                            <div class="upload_area">
	                                            <div class="btnfile">
										            <span><if condition="$item.order_banner">替换<else />上传</if></span>
										            <input id="fileuploadOrderBanner" type="file" name="order_banner_file" >
										        </div>
										        <div class="progress">
										    		<span class="bar"></span><span class="percent">0%</span >
												</div>
										        <div class="files"></div>
										        <div class="showimg"><if condition="$item.order_banner"><img src="__UPLOADS__/Service/OrderBanner/{$item.order_banner}" style="width:100px; height:100px;"></if></div>
	                                        </div>
	                                    </div>
	                                </div>
	                            </div>
	                            
	                            <div class="appmsg_edit_item">
                                    <label for="" class="frm_label">
                                        <strong class="title">详情轮播面图</strong>
                                        <p class="js_cover_tip tips">（大图片建议尺寸：640像素 * 480像素）</p>
                                    </label>
                                    <div class="upload_wrap">
                                       	<div class="upload_box">
                                            <div class="upload_area">
	                                            <div class="btnfile">
										            <span>上传轮播图</span>
										            <input id="fileuploadBanner" type="file" name="banner_file" multiple>
										        </div>
	                                        </div>
	                                    </div>
	                                </div>
	                            </div>
	                            
	                            <div class="appmsg_edit_item">
                                	<ul id="uploadBannerContainer"><if condition="$covers">
                                			<foreach name="covers" item="cover">
                                				<li class="uploadLi" >
						        	          		<input type="hidden" name="cover_img_name[]" value="{$cover.img_name}">
						        	          		<div class="div_img">
						        	          			<a class='deleteBtn btnfile' onclick="deleteCover(this);" href="javascript:void(0);">删除</a>
						        	          			<img style="width: 100%" src="__UPLOADS__/Service/Carousel/{$cover.upload_number}/{$cover.img_name}" />
						        	          		</div>
						        	          	</li>
                                			</foreach>
                                		</if>
                                	</ul>
                                </div>
                                
								<div id="js_ueditor" class="appmsg_edit_item content_edit">
                                    <label for="" class="frm_label">
                                        <strong class="title">项目介绍</strong>
                                        <p class="tips">
                                            <em id="js_auto_tips">（最多不超过1000个字）</em>
                                            <div style="margin-top: 20px;float: left;"> 
                                            	<textarea name="service_desc" >{$item.service_desc}</textarea>
                                            </div>
                                        </p>
                                    </label>
                                </div>
	                            
	                            <div class="appmsg_edit_item">
                                    <label for="" class="frm_label">功效</label>
                                    <span class="frm_input_box"><input type="text" class="frm_input js_title" name="effect" value="{$item.effect}"/></span>
                                </div>
                                
                                <div class="appmsg_edit_item">
                                    <label for="" class="frm_label">原价</label>
                                    <span class="frm_input_box"><input type="text" class="frm_input js_title" name="original_price" value="{$item.original_price}"/></span>
                                </div>
                                
                                <div class="appmsg_edit_item">
                                    <label for="" class="frm_label">标签</label>
                                    <span class="frm_input_box"><input type="text" class="frm_input js_title" name="tag" value="{$item.tag}"/></span>
                                </div>
                                
                                <div class="appmsg_edit_item">
                                    <label for="" class="frm_label">标签背景</label>
                                    <span class="frm_input_box">
                                    	 <div style="clear: both;">
	                                    	<if condition="$item.tag_bg eq zhekou_a">
	                                    	<input type="radio" class="js_title" name="tag_bg" value="zhekou_a" checked/>
	                                    	<else />
	                                    	<input type="radio" class="js_title" name="tag_bg" value="zhekou_a"/>
	                                    	</if>
	                                    	<div class="zhekou zhekou_a"></div>
				                       </div>
				                       <div style="clear: both;">
				                       <if condition="$item.tag_bg eq zhekou_b">
                                    	<input type="radio" class="js_title" name="tag_bg" value="zhekou_b" checked/>
                                    	<else />
                                    	<input type="radio" class="js_title" name="tag_bg" value="zhekou_b"/>
                                    	</if>
                                    	<div class="zhekou zhekou_b"></div>
				                       </div>
                                    </span>
                                </div>
                                
	                            <div class="appmsg_edit_item">
                                    <label for="" class="frm_label">价格</label>
                                    <span class="frm_input_box"><input type="text" class="frm_input js_title" name="price" value="{$item.price}"/></span>
                                </div>
                                
	                            <div class="appmsg_edit_item">
                                    <label for="" class="frm_label">服务时长</label>
                                    <span class="frm_input_box" style=" width: 50px; display: inline-block;  margin-right: 5px;"><input type="text" class="frm_input js_title" name="service_time" value="{$item.service_time}"/></span> 分钟
                                </div>
                                
                                <div id="js_ueditor" class="appmsg_edit_item content_edit">
                                    <label for="" class="frm_label">
                                        <strong class="title">适用人群</strong>
                                        <p class="tips">
                                            <em id="js_auto_tips">（最多不超过255个字）</em>
                                            <div style="margin-top: 20px;float: left;"> 
                                            	<textarea name="people_use" >{$item.people_use}</textarea>
                                            </div>
                                        </p>
                                    </label>
                                </div>
                                
                                <div id="js_ueditor" class="appmsg_edit_item content_edit">
                                    <label for="" class="frm_label">
                                        <strong class="title">注意事项</strong>
                                        <p class="tips">
                                            <em id="js_auto_tips">（最多不超过255个字）</em>
                                            <div style="margin-top: 20px;float: left;"> 
                                            	<textarea name="note" >{$item.note}</textarea>
                                            </div>
                                        </p>
                                    </label>
                                </div>
                                
                                <div class="appmsg_edit_item">
                               		<label for="" class="frm_label">使用产品</label>
                               		<ul class="productList">
                               			<if condition="$products">
                               				<foreach name="products" item="product">
                               					<li>
                               						<if condition="$product['selected']">
                               							<input type="checkbox" name="product[]" value="{$product.id}" checked>
                               						<else />
                               							<input type="checkbox" name="product[]" value="{$product.id}" >
                               						</if><label>{$product.title}</label>
                               					</li>
                               				</foreach>
                               			</if>
                               		</ul>
                                </div>
                                
                                <div class="appmsg_edit_item">
                                    <label for="" class="frm_label">服务步骤</label>
                                    <ul class="service_step">
                                    	<if condition="$steps">
                                    	<foreach name="steps" item="step" key="key">
                                    	<li class="step">
                                    		<input type="hidden" name="step_id[]" value="{$step.id}">
                                    		<label for="" class="frm_label">步骤：<span class="number">{++$key}</span></label>
	                                    	<span class="frm_input_box">
	                                    		<input type="text" class="frm_input js_title" name="title[]" value="{$step.title}" placeholder="步骤名称"/>
	                                    	</span>
	                                    	<span class="frm_input_box">
	                                    		<input type="text" class="frm_input js_title" name="content[]" value="{$step.content}" placeholder="步骤内容"/>
	                                    	</span>
                                    	</li>
                                    	</foreach>
                                    	<else />
                                    	<li class="step">
                                    		<input type="hidden" name="step_id[]" value="">
                                    		<label for="" class="frm_label">步骤：<span class="number">1</span></label>
	                                    	<span class="frm_input_box">
	                                    		<input type="text" class="frm_input js_title" name="title[]" value="" placeholder="步骤名称"/>
	                                    	</span>
	                                    	<span class="frm_input_box">
	                                    		<input type="text" class="frm_input js_title" name="content[]" value="" placeholder="步骤内容"/>
	                                    	</span>
                                    	</li>
                                    	</if>
                                    	<li><a id="addStep">添加步骤</a></li>
                                    </li>
                                </div>
                        	</div>
                    	</div>
                	</div>
	                <div class="tool_area">
	                    <div class="tool_bar border tc">
	                        <span id="js_submit" class="btn btn_input btn_primary"><button type="submit">保存</button></span>
	                    </div>
	                </div>
            	</div>
        	</div>
        </form>
        <script src="__ADMIN__/js/plugins/fileupload/jquery.ui.widget.js"></script>
		<script src="__ADMIN__/js/plugins/fileupload/jquery.iframe-transport.js"></script>
		<script src="__ADMIN__/js/plugins/fileupload/jquery.fileupload.js"></script>
        <script type="text/javascript">
	        KindEditor.ready(function(K) {
	        	var editor1 = K.create('textarea[name="service_desc"]', {
	        		cssPath : '__ADMIN__/js/plugins/code/prettify.css',
	        		uploadJson : '__PUBLIC__/lib/upload_json.php',
	        		width : "133%", //编辑器的宽度为70%
	        	    height : "360px", //编辑器的高度为100px
	        		fileManagerJson : '__PUBLIC__/lib/file_manager_json.php',
	        		items:['source', 'undo', 'redo',
	        		       'justifyleft', 'justifycenter', 'justifyright',
	        		       'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent','selectall',
	        		       'title', 'bold',
	        		       'italic', 'underline','image','multiimage','removeformat','|', 'fullscreen'],
	        		allowFileManager : true,
	        		afterCreate : function() {
	        			var self = this;
	        			K.ctrl(document, 13, function() {
	        				self.sync();
	        				K('form[name=example]')[0].submit();
	        			});
	        			K.ctrl(self.edit.doc, 13, function() {
	        				self.sync();
	        				K('form[name=example]')[0].submit();
	        			});
	        		}
	        	});
	        	var editor2 = K.create('textarea[name="people_use"]', {
	        		cssPath : '__ADMIN__/js/plugins/code/prettify.css',
	        		uploadJson : '__PUBLIC__/lib/upload_json.php',
	        		width : "147%", //编辑器的宽度为70%
	        	    height : "360px", //编辑器的高度为100px
	        		fileManagerJson : '__PUBLIC__/lib/file_manager_json.php',
	        		items:['source', 'undo', 'redo',
	        		       'justifyleft', 'justifycenter', 'justifyright',
	        		       'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent','selectall',
	        		       'title', 'bold',
	        		       'italic', 'underline','removeformat','|', 'fullscreen'],
	        		allowFileManager : true,
	        		afterCreate : function() {
	        			var self = this;
	        			K.ctrl(document, 13, function() {
	        				self.sync();
	        				K('form[name=example]')[0].submit();
	        			});
	        			K.ctrl(self.edit.doc, 13, function() {
	        				self.sync();
	        				K('form[name=example]')[0].submit();
	        			});
	        		}
	        	});
	        	var editor3 = K.create('textarea[name="note"]', {
	        		cssPath : '__ADMIN__/js/plugins/code/prettify.css',
	        		uploadJson : '__PUBLIC__/lib/upload_json.php',
	        		width : "147%", //编辑器的宽度为70%
	        	    height : "360px", //编辑器的高度为100px
	        		fileManagerJson : '__PUBLIC__/lib/file_manager_json.php',
	        		items:['source', 'undo', 'redo',
	        		       'justifyleft', 'justifycenter', 'justifyright',
	        		       'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent','selectall',
	        		       'title', 'bold',
	        		       'italic', 'underline','removeformat','|', 'fullscreen'],
	        		allowFileManager : true,
	        		afterCreate : function() {
	        			var self = this;
	        			K.ctrl(document, 13, function() {
	        				self.sync();
	        				K('form[name=example]')[0].submit();
	        			});
	        			K.ctrl(self.edit.doc, 13, function() {
	        				self.sync();
	        				K('form[name=example]')[0].submit();
	        			});
	        		}
	        	});
	        	prettyPrint();
	        });
	        
        	function deleteStep(elem) {
        		var step = $(elem).parents('li');
        		
        		step.remove();
        		
        		$('.step').each(function (i, obj) {
        			$(obj).find('.number').text(i + 1);
        		});
        	}
        	
        	function deleteCover(elem) {
        		$(elem).parents('li').remove();
        	}
        	
        	$(function () {
        		$("#addStep").click(function () {
        			var createStep = '<li class="step">'
        							+'<input type="hidden" name="step_id[]" value="">'
                               		+'<label for="" class="frm_label">步骤：<span class="number">'+($('.step').length + 1)+'</span><a  onclick="deleteStep(this);" style="float:right;">delete</a></label>'
                                	+'<span class="frm_input_box">'
                                		+'<input type="text" class="frm_input js_title" name="title[]" value="" placeholder="步骤名称"/>'
                                	+'</span>'
                                	+'<span class="frm_input_box">'
                                		+'<input type="text" class="frm_input js_title" name="content[]" value="" placeholder="步骤内容"/>'
                                	+'</span>'
                               	+'</li>';
        			$('.service_step .step:last').after(createStep);
        		});
        		
        		$("#fileupload").fileupload({
          			url: "{:U('/Admin/ServiceItem/uploadServiceCover')}",
          			dropZone: null,
          			pasteZone: null,
          			autoUpload: true,
          			limitConcurrentUploads: 1,
          			add: function (e, data) {
          				if (e.isDefaultPrevented()) {
          	                return false;
          	            }

          				$("#fileupload").parents(".upload_wrap").show().find('.progress').show();
          	            data.submit();
          			},
          			formData:{
          				
          			},//如果需要额外添加参数可以在这里添加  
          			done:function(e, result){  
          		        var data = result.result;
          	          	var container = $("#fileupload").parents(".upload_wrap");
          	          	
          	          	$("#cover").val(data.name);
          	          	
          	          	var showimg = container.find('.showimg');
          	          	showimg.html("<img src='"+data.url+"' style='width:600px; height:260px;'>");
          	          
          	          	container.find('.progress').hide();
          			},
          		    progress: function (e, data) {
          		    	var container = $("#fileupload").parents(".upload_wrap");
          		    	var progress = Math.floor(e.delegatedEvent.loaded/e.delegatedEvent.total * 100);
          		    	container.find('.bar').attr('style', 'width:'+progress + '%');
          		    	container.find('.percent').text(progress + '%');
          		    }
          		});
        		
        		$("#fileuploadOrderBanner").fileupload({
          			url: "{:U('/Admin/ServiceItem/uploadServiceOrderBanner')}",
          			dropZone: null,
          			pasteZone: null,
          			autoUpload: true,
          			limitConcurrentUploads: 1,
          			add: function (e, data) {
          				if (e.isDefaultPrevented()) {
          	                return false;
          	            }

          				$("#fileuploadOrderBanner").parents(".upload_wrap").show().find('.progress').show();
          	            data.submit();
          			},
          			formData:{
          				
          			},//如果需要额外添加参数可以在这里添加  
          			done:function(e, result){  
          		        var data = result.result;
          	          	var container = $("#fileuploadOrderBanner").parents(".upload_wrap");
          	          	
          	          	$("#orderBanner").val(data.name);
          	          	
          	          	var showimg = container.find('.showimg');
          	          	showimg.html("<img src='"+data.url+"' style='width:160px; height:120px;'>");
          	          
          	          	container.find('.progress').hide();
          			},
          		    progress: function (e, data) {
          		    	var container = $("#fileuploadOrderBanner").parents(".upload_wrap");
          		    	var progress = Math.floor(e.delegatedEvent.loaded/e.delegatedEvent.total * 100);
          		    	container.find('.bar').attr('style', 'width:'+progress + '%');
          		    	container.find('.percent').text(progress + '%');
          		    }
          		});
        		
        		$("#fileuploadBanner").fileupload({
          			url: "{:U('/Admin/ServiceItem/uploadServiceBanner')}",
          			dropZone: null,
          			pasteZone: null,
          			autoUpload: true,
          			limitConcurrentUploads: 5,
          			add: function (e, data) {
          				if (e.isDefaultPrevented()) {
        	                return false;
        	            }

        	            var html = '';
        	            for (var i in data.files) {
        	            	html += '<li class="uploadLi" >'
        	              		+'<div class="div_img">'
        	              			+'<div class="progress">'
										+'<span class="bar"></span><span class="percent">0%</span >'
									+'</div>'
        	              		+'</div>'
        	              	+'</li>';
        	            }
        	            
        	            $('#uploadBannerContainer').append(html);
        	            data.submit();
          			},
          			formData:{
          				num: $('#number').val()
          			},//如果需要额外添加参数可以在这里添加  
          			done:function(e, result){  
          				console.log(result.result);
          				var completeElem = $(result.content).parents('.uploadLi');
         		        
         		        var data = result.result;
         		        var html = '<li class="uploadLi" >'
         	          		+'<input type="hidden" name="cover_img_name[]" value="'+data[0].name+'">'
         	          		+'<div class="div_img">'
         	          			+'<a class="deleteBtn btnfile" onclick="deleteCover(this);" href="javascript:void(0);">删除</a>'
         	          			+'<img style="width: 100%" src="'+data[0].url+'" />'
         	          		+'</div>'
         	          	+'</li>';
         	          	
         		        completeElem.replaceWith(html);
          			},
          		    progress: function (e, data) {
          		    	var files = data.originalFiles;
        		    	var file = data.files [0];
        		    	var index;
        		    	for (var i in files) {
        		    		if (files [i].name == file.name) {
        		    			index = i;
        		    		}
        		    	}
        		    	
        		    	var $progressElems = $('#uploadBannerContainer').find('.progress');
        		    	var progress = Math.floor(e.delegatedEvent.loaded/e.delegatedEvent.total * 100);
        		    	var progressElem = $progressElems.eq(index);
        		    	data.content = progressElem;
        		    	progressElem.find('.bar').attr('style', 'width:'+progress + '%');
        		    	progressElem.find('.percent').text(progress + '%');
          		    }
          		});
        	});
        </script>
    </body>
</html>